<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英文字母认字游戏</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        #alphabet {
            display: flex;
            flex-wrap: wrap;
            width: 800px;
            margin-top: 20px;
        }
        #prompt {
            color: red;
        }
        #score {
            color: green;
        }
        .letter {
            width: 100px;
            height: 100px;
            margin: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 80px;
            background-color: #fff;
            border: 2px solid #007BFF;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .letter:hover {
            background-color: #e7f0ff;
        }
        #repeatButton {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        #repeatButton:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h1>英文字母（大写）认字游戏</h1>
    <h2 id="score"></h2>
    <button id="repeatButton">重读字母</button>
    <h2 id="prompt"></h2>
    <div id="alphabet"></div>

    <script>
        const alphabet0 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        const promptElement = document.getElementById('prompt');
        const alphabetContainer = document.getElementById('alphabet');
        const repeatButton = document.getElementById('repeatButton');
        let currentLetter;
        let alphabet;

        function generateRandomLetter() {
            return alphabet[Math.floor(Math.random() * alphabet.length)];
        }

        function sayLetter(letter) {
            const utterance = new SpeechSynthesisUtterance(letter);
            speechSynthesis.speak(utterance);
        }
        
        function shuffleString(str) {
            const characters = str.split('');
            for (let i = characters.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [characters[i], characters[j]] = [characters[j], characters[i]];
            }
            
            return characters.join('');
        }

        function createAlphabet() {
            alphabet = shuffleString(alphabet0);
            alphabet.split('').forEach(letter => {
                const letterDiv = document.createElement('div');
                letterDiv.classList.add('letter');
                letterDiv.textContent = letter;

                letterDiv.addEventListener('click', () => {
                    if (letter === currentLetter) {
                        // alert('正确！');
                        promptElement.textContent = `正确`;                        
                        sayLetter(`正确`);

                        setTimeout    
                        (
                            function() 
                            {
                                startNewRound();
                            }, 2000
                        );
                        
                    } else {
                        // alert('错误，请再试一次。');
                        promptElement.textContent = `错误，请再试一次`;
                        sayLetter(`错误,请再试一次`);
                        sayLetter(currentLetter);
                    }
                });

                alphabetContainer.appendChild(letterDiv);
            });
        }

        function startNewRound() {
            currentLetter = generateRandomLetter();
            promptElement.textContent = `点击字母`;
            sayLetter(currentLetter); // 播放语音提示
        }

        // 添加重读功能
        repeatButton.addEventListener('click', () => {
            sayLetter(currentLetter);
        });

        createAlphabet();
        setTimeout(startNewRound, 2000); // 2秒后开始新一轮
    </script>
</body>
</html>
